<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { useNotify } from 'nutui-uniapp/composables'
import { storeToRefs } from 'pinia'
import { onMounted, reactive } from 'vue'
import Login from '../login/index.vue'

const notify = useNotify()
// 用户存储
const userStore = useUserStore()
const { isLogin, readAvatar, readUserInfo } = storeToRefs(userStore)

// 状态参数
const state = reactive({
  count: [
    {
      num: 5,
      text: '我的收藏',
    },
    {
      num: 7,
      text: '我的足迹',
    },
    {
      num: 1,
      text: '优惠券',
    },
  ],
  navs: [
    {
      icon: '\u{E602}',
      text: '待付款',
    },
    {
      icon: '\u{E601}',
      text: '待发货',
    },
    {
      icon: '\u{E603}',
      text: '待收货',
    },
    {
      icon: '\u{E604}',
      text: '待评价',
    },
    {
      icon: '\u{E60A}', // 原代码：&#xe60a;
      text: '退款',
    },
  ],
})

// 账号管理
function handleUserAction() {
  uni.navigateTo({
    url: '/pages/mine/account',
  })
}

// 头像加载失败
function loadAvatarError() {
  userStore.useEmptyAvatar()
}

// 未实装提示
function underConstruction() {
  notify.warning('本功能未实装，可自行实现')
}

onMounted(async () => {
  await userStore.refreshUserInfo()
})
</script>

<template>
  <view flex-col>
    <template v-if="isLogin">
      <nut-notify />
      <view class="user-board">
        <view class="bg-radius" />
        <view class="logo" flex>
          <image
            class="logo-img"
            :src="readAvatar"
            @error="loadAvatarError"
            @click="handleUserAction"
          />
          <view class="logo-title" @click="handleUserAction">
            <text class="uer-name">
              {{ readUserInfo.nickname }}
            </text>
          </view>
          <view class="count" flex>
            <view
              v-for="(c, index) in state.count"
              :key="index"
              class="count-item"
              flex
              @click="underConstruction"
            >
              <text class="count-item-num">
                {{ c.num }}
              </text>
              <text class="count-item-text">
                {{ c.text }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <view flex-col>
        <view class="center-nav" mt-18rpx>
          <view class="center-nav-title">
            <text>我的订单</text>
          </view>
          <view class="center-nav-content">
            <view
              v-for="(nav, index) in state.navs"
              :key="index"
              class="center-nav-item"
              flex
              @click="underConstruction"
            >
              <text class="center-nav-item-icon">
                {{ nav.icon }}
              </text>
              <text class="center-nav-item-text">
                {{ nav.text }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <nut-cell-group class="no-radius">
        <nut-cell
          title="账号管理"
          icon="my"
          size="large"
          to="/pages/mine/account"
        />
        <nut-cell
          title="收货地址"
          icon="cart"
          size="large"
          is-link
          @click="underConstruction"
        />
        <nut-cell
          title="帮助与反馈"
          icon="ask"
          size="large"
          is-link
          @click="underConstruction"
        />
        <nut-cell
          title="服务条款"
          icon="tips"
          size="large"
          is-link
          @click="underConstruction"
        />
        <nut-cell
          title="设置"
          icon="setting"
          size="large"
          is-link
          @click="underConstruction"
        />
        <nut-cell
          title="关于"
          icon="shop"
          size="large"
          is-link
          to="/pages/mine/about"
        />
      </nut-cell-group>
    </template>
    <Login v-else :show-copyright="false" />
  </view>
</template>

<style lang="scss">
  @font-face {
    font-family: texticons;
    font-weight: normal;
    font-style: normal;
    src: url('@/static/fonts/font-shop.ttf') format('truetype');
  }
</style>

<style lang="scss">
  body {
    overflow: hidden;
  }
</style>

<style lang="scss" scoped>
  .user-board {
    width: 100vw;
    height: 435rpx;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    background: #f5f5f5 url('@/static/board-head.png') top center no-repeat;

    .bg-radius {
      background-color: #fff;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      width: 120vw;
      height: 550rpx;
      box-sizing: border-box;
      position: absolute;
      left: 50%;
      margin-left: -60vw;
      top: 150rpx;
      z-index: 8;
    }
    .logo {
      background-color: transparent;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      width: 100vw;
      box-sizing: border-box;
      flex-direction: column;
      align-items: center;
      position: absolute;
      left: 0;
      top: 70rpx;
      z-index: 9;

      .logo-img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        border: solid 8rpx #efefef;
        background-color: #fff;
      }

      .logo-title {
        height: 150rpx;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;

        .uer-name {
          height: 60rpx;
          line-height: 60rpx;
          font-size: 34rpx;
          color: #333;
        }
      }

      .count {
        margin: 30rpx auto 0rpx;
        width: 100vw;
        .count-item {
          flex-direction: column;
          flex: 1;
          text-align: center;

          .count-item-num {
            color: #333;
            font-size: 36rpx;
            font-weight: 500;
          }
          .count-item-text {
            color: #333;
            font-size: 28rpx;
            font-weight: 400;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
  .center-nav {
    background-color: #ffffff;
    padding-top: 1rpx;
    width: 100vw;
    flex-direction: column;

    .center-nav-title {
      padding: 25rpx 30rpx;
      font-size: 30rpx;
      color: #333;
      font-weight: 400;
      border-bottom: solid 1rpx #efefef;
    }
    .center-nav-content {
      height: 180rpx;
      display: flex;
      align-items: center;
      .center-nav-item {
        flex-direction: column;
        flex: 1;
        text-align: center;

        .center-nav-item-icon {
          color: #333;
          font-size: 48rpx;
          font-weight: 500;
          font-family: texticons;
        }
        .center-nav-item-text {
          color: #666;
          font-size: 26rpx;
          font-weight: 400;
          margin-top: 15rpx;
        }
      }
    }
  }
</style>

<route lang="json">
{
  "style": {
    "navigationStyle": "default",
    "app-plus": {
      "titleNView": false,
      "bounce": "none"
    },
    "h5": {
      "titleNView": false
    }
  }
}
</route>
